/* eslint-disable react/prop-types */
import { useLocation, useNavigate } from 'react-router-dom'
import { Popup, List } from 'antd-mobile'
import './index.scss'
import { useEffect, useState } from 'react'

const useNavigation = (visible) => {
    const [navItems, setNavItems] = useState([])
    const [userInfo, setUserInfo] = useState({})

    useEffect(() => {
        if (!visible) return

        const defaultNavItems = [
            { name: '商店', path: '/' },
            { name: '会议', path: '/meeting' },
            { name: '修改密码', path: '/update' },
        ]

        const fetchUserInfo = () => {
            try {
                const storedInfo = localStorage.getItem('userInfo')
                const info = storedInfo ? JSON.parse(storedInfo) : {}
                setUserInfo(info)
                return info
            } catch (error) {
                console.error('Failed to parse user info from localStorage:', error)
                return {}
            }
        }

        const info = fetchUserInfo()
        console.log(info.level, '等级')
        const navItems = [
            ...defaultNavItems,
            ...(info.level !== 0 ? [] : [{ name: '二维码', path: '/photo' }]),
            ...(info.level === 3 ? [] : [{ name: '创建用户', path: '/add' }]),
            ...(info.level === 0 || info.level === 1
                ? [
                      { name: '用户列表', path: '/users' },
                      { name: '检查类型列表', path: '/shop/types' }
                  ]
                : [])
        ]
        setNavItems(navItems)
    }, [visible])

    return { userInfo, navItems }
}

const Sidebar = ({ visible, setVisible }) => {
    const navigate = useNavigate()
    const location = useLocation()

    const { userInfo, navItems } = useNavigation(visible)

    return (
        <Popup position="left" visible={visible} onMaskClick={() => setVisible(false)} onClose={() => setVisible(false)} bodyStyle={{ width: '70vw' }}>
            <div className="App_menu">
                <div className="App_menu_head">
                    <p>{userInfo.name}</p>
                    <p>level：{userInfo.level}</p>
                </div>
                <List>
                    {navItems.map((route) => (
                        <List.Item
                            key={route.path}
                            onClick={() => {
                                navigate(route.path)
                                setVisible(false)
                            }}
                            style={{
                                color: location.pathname === route.path ? '#1677ff' : 'black'
                            }}
                        >
                            {route.name}
                        </List.Item>
                    ))}
                    <List.Item
                        onClick={() => {
                            localStorage.setItem('userInfo', '')
                            navigate('/login')
                            setVisible(false)
                        }}
                    >
                        退出登录
                    </List.Item>
                </List>
            </div>
        </Popup>
    )
}

export default Sidebar
